<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="运营商数据查询系统">
    <meta name="keywords" content="运营商, 数据查询, 统计">
    <title>运营商数据查询</title>
    <style>
        body {
            font-family: 'Lato', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f4f8;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }

        .search-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .search-box select {
            padding: 0 12px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 150px;
            height: 44px;
            text-align: center;
        }

        .search-box button {
            padding: 12px 24px;
            font-size: 16px;
            background-color: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            height: 44px;
            transition: background-color 0.3s ease;
        }

        .search-box button:hover {
            background-color: #2563eb;
        }

        .search-box button:disabled {
            background-color: #e2e8f0;
            color: #9ca3af;
            cursor: not-allowed;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
        }

        th,
        td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
        }

        th:first-child,
        td:first-child {
            border-left: 1px solid #e0e0e0;
        }

        tr:nth-child(even) {
            background-color: #fafafa;
        }

        tr:hover {
            background-color: #f1f5f9;
        }

        .status-up {
            color: #10b981;
            font-weight: bold;
        }

        .status-down {
            color: #ef4444;
            font-weight: bold;
        }

        .carrier-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .carrier-tab {
            cursor: pointer;
            padding: 12px 24px;
            background-color: #f1f5f9;
            border: none;
            outline: none;
            transition: all 0.3s ease;
            font-weight: 500;
            color: #64748b;
            margin: 0 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .carrier-tab:hover {
            background-color: #e2e8f0;
        }

        .carrier-tab.active {
            background-color: #3b82f6;
            color: white;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="search-box">
        <select id="merchantSelect">
            <option value="" disabled selected>请选择商户</option>
            <option value="ZSJ10001">ZFSZJ-ZD</option>
            <option value="ZSJ10002">ZFSZJ-YXNORMAL</option>
            <option value="ZSJ10003">ZFSZJ-YXLOW</option>
        </select>
        <button id="searchBtn" disabled>查询</button>
    </div>
    <div class="carrier-tabs" id="carrierTabs"></div>
    <table id="dataTable">
        <thead id="tableHead"></thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<script>
    document.getElementById('searchBtn').addEventListener('click', queryProductInfo);
    document.getElementById('merchantSelect').addEventListener('change', updateButtonState);

    function updateButtonState() {
        const merchantSelect = document.getElementById('merchantSelect');
        const searchBtn = document.getElementById('searchBtn');
        searchBtn.disabled = !merchantSelect.value;
    }

    let controller = new AbortController();
    let organizedData, amounts;

    async function queryProductInfo() {
        const merchantId = document.getElementById('merchantSelect').value;
        try {
            controller.abort();
            controller = new AbortController();
            const signal = controller.signal;

            const response = await fetch('https://dytest.zhaoshujie.top/console/productQuery', {
                method: 'POST',
                body: JSON.stringify({
                    'AppId': merchantId,
                    'SupplierCode': '',
                    'TimeStamp': Date.now(),
                    'Sign': ''
                }),
                headers: {
                    'Content-Type': 'application/json'
                },
                signal: signal
            });

            const data = await response.json();

            if (data && data.Data) {
                const json = data.Data;
                initializeUI(json);
            } else {
                alert(data.Msg);
            }
        } catch (error) {
            if (error.name === 'AbortError') {
                console.log('请求被中断');
            } else {
                console.error('网络错误:', error);
                alert('网络错误，请稍后重试。');
            }
        }
    }

    const provinceMap = {
        '110000': '北京市', '120000': '天津市', '130000': '河北省', '140000': '山西省',
        '150000': '内蒙古自治区', '210000': '辽宁省', '220000': '吉林省', '230000': '黑龙江省',
        '310000': '上海市', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省',
        '350000': '福建省', '360000': '江西省', '370000': '山东省', '410000': '河南省',
        '420000': '湖北省', '430000': '湖南省', '440000': '广东省', '450000': '广西壮族自治区',
        '460000': '海南省', '500000': '重庆市', '510000': '四川省', '520000': '贵州省',
        '530000': '云南省', '540000': '西藏自治区', '610000': '陕西省', '620000': '甘肃省',
        '630000': '青海省', '640000': '宁夏回族自治区', '650000': '新疆维吾尔自治区',
        '710000': '台湾省', '810000': '香港特别行政区', '820000': '澳门特别行政区'
    };

    //

    const carrierMap = {
        'CM': '移动',
        'CT': '电信',
        'CU': '联通'
    };

    function convertToYuan(fen) {
        return (fen / 100);
    }

    function organizeData(data) {
        const organizedData = {};
        const amounts = new Set();
        data.forEach(item => {
            const province = provinceMap[item.Adcode] || item.Adcode;
            const carrier = item.CarrierCode;
            const amount = convertToYuan(item.ProductDenomination);
            const status = item.Status === 0 ? '下架' : '上架';

            if (!organizedData[province]) {
                organizedData[province] = { CM: {}, CT: {}, CU: {} };
            }
            organizedData[province][carrier][amount] = status;
            amounts.add(amount);
        });
        return { organizedData, amounts: Array.from(amounts).sort((a, b) => parseFloat(a) - parseFloat(b)) };
    }

    function getStatusClass(status) {
        return status === '上架' ? 'status-up' : 'status-down';
    }

    function renderTable(selectedCarrier = 'CM') {
        const tableHead = document.getElementById('tableHead');
        const tableBody = document.getElementById('tableBody');

        tableHead.innerHTML = `
                <tr>
                    <th>区域</th>
                    ${amounts.map(amount => `<th>${amount}</th>`).join('')}
                </tr>
            `;

        tableBody.innerHTML = '';
        for (const province in organizedData) {
            const row = document.createElement('tr');
            row.innerHTML = `
                    <td>${province}</td>
                    ${amounts.map(amount => {
                const status = organizedData[province][selectedCarrier][amount] || '-';
                const statusClass = getStatusClass(status);
                return `<td class="${statusClass}">${status}</td>`;
            }).join('')}
                `;
            tableBody.appendChild(row);
        }
    }

    function renderCarrierTabs(selectedCarrier) {
        const carrierTabs = document.getElementById('carrierTabs');
        carrierTabs.innerHTML = Object.entries(carrierMap).map(([code, name]) =>
            `<button class="carrier-tab${code === selectedCarrier ? ' active' : ''}" data-carrier="${code}">${name}</button>`
        ).join('');
    }

    document.getElementById('carrierTabs').addEventListener('click', (event) => {
        if (event.target.classList.contains('carrier-tab')) {
            const carrier = event.target.getAttribute('data-carrier');
            renderCarrierTabs(carrier);
            renderTable(carrier);
        }
    });

    function initializeUI(data) {
        const organized = organizeData(data);
        organizedData = organized.organizedData;
        amounts = organized.amounts;
        renderCarrierTabs('CM');
        renderTable();
    }
</script>
</body>

</html>